<template>
	<view style="height: 100%;">
		<view class="top">
			
			<view class="firstRow">
				<view class="iconfont icon-064dangqianweizhi" style="color: #2979FF;height: 33rpx; width: 0rpx;">
				</view>
				<u-mask :show="showOverlay" v-if="showOverlay" z-index=0 @click="closeDropdown"></u-mask>
				
				
				<view class="dropdown ">
						<u-dropdown ref="uDropdown" @open="showOverlay=true" @close="showOverlay=false">
							<u-dropdown-item v-model="Locationvalue" :title="locationTitle" :options="locationOptions" @change='itemChange'></u-dropdown-item>
							<!-- <u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item> -->
						</u-dropdown>
				</view>
				
				<view class="search">
					<u-search v-model="keyword" 
					bgColor="transparent" 
					searchIconColor='#5db4f4'
					clearabled="true"
					borderColor='#5db4f4'
					placeholder='搜索你需要的闲置'
					border='4rpx solid #5db4f4'
					 @change="getSearch(keyword)" 
					 :show-action="false" 
					 @blur="closeSearchItem"
					 @focus="getSearch(keyword)"
					 @clear="getShouYeGoods"
					 height='70'
					 @search="search(0)"
					 @clickIcon = "search(0)">
					</u-search>
				</view>
			</view>
			<view  :animation="animation1">
				<u-tabs-swiper :current='current' gutter=56 @change="tabsChange" ref="uTabs" :list="tabslist" :is-scroll="true"></u-tabs-swiper>
			</view>
		</view>
		
		<u-modal v-model="showNavTo" :mask-close-able="true" :show-cancel-button="true" :show-title="false" @confirm="confirmNav" :content="content" @cancel="showNavTo=false"></u-modal>
		
		
				
	
		<swiper class="" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabslist" :key="index" >
						<!-- v-for="(item, index) in tabs" :key="index"-->
						<scroll-view scroll-y style="height: 100%;width: 100%;"    @scrolltolower="onreachBottom(11)" lower-threshold='20' @scroll='scrollEvent'>
							<view class="goodListCss">
								<goodListShow :goodsListIndex='goodList' :navurl='true' :loading='loading'></goodListShow>
							</view>
							<view class="bgImg" v-if="isEmpty">
								<image src="http://1.14.247.152:9797/images/18258空箱子.png" mode="widthFix"></image>
							</view>
						</scroll-view>
					</swiper-item>
					
					
		</swiper>
		
		<!-- 联想 -->
		<view class="AssociatioPosition"  v-if="AssociationListShow" >
			
			<scroll-view :class="'AssociatioList'+' '+[false?'AssociatioList1':'']" scroll-y>
				<view v-for="(item,index) in AssociationList" class="item">
					<view  v-html="item.highLight.name" class="AssociationListItem" @click="associationFun(item.source)">
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="publishBtn" :animation="animation"  v-if='true'>
			<!-- <button class="inputbtn"  type="warn" @click="toPublish()">去发布</button> -->
			<u-button class="inputbtn"  type="primary" :show = '!isAnimationStatus'   @click="toPublish()">发布</u-button>
			
		</view>
		<!-- <view class="ani">
			<u-button class="inputbtn"  type="primary"  @click="translate()">移动</u-button>
		</view> -->
		
		<view class="loadingCss" v-if="showloadingIcon">
			<text>—</text>
			<view class="loadingIcon">
				<u-loading mode="flower" :show='showloadingIcon' size='50'></u-loading>
			</view>
			<text>正在加载...—</text>
		</view>
		<view class="showBottomCss" v-if="showBottomIcon">
			<text>—</text>
			<!-- <view class="loadingIcon">
				<u-loading mode="flower" :show='showloadingIcon' size='50'></u-loading>
			</view> -->
			<text>到底啦!—</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header:'',
				classifyId:0,
				location:0,
				page:0,
				current:0,
				animation:{},
				animation1:{},
				tabslist: [],
				goodList:[],
				keyword: '',
				AssociationListShow: false,
				AssociationList: '',
				isAnimationStatus:false,
				show:false,
				swiperCurrent:0,
				isEmpty:'',
				showNavTo:false,
				content: '去"我的发布"擦亮商品以提高曝光度？',
				showloadingIcon:false,
				showBottomIcon:false,
				currentPage:1,
				allAssociationGoods:[],
				Locationvalue: 1,
				showOverlay:false,
				locationOptions: [
					{
						label: '不限',
						value: 0,
					},
					{
						label: '海珠',
						value: 1,
					},
					{
						label: '白云',
						value: 2,
					}
				],
				locationTitle:'不限',
				loading:true,
				
			};
		},
		onReady(){
			
		},
		onLoad(res){
			
			console.log('闲置首页页面参数',res)
			if(res.show2==1){
				this.showNavTo=true
			}
			let header = new Object()
			 header.Authority= getApp().globalData.header.Authority
			 this.header = header;
			console.log('闲置首页onLoad的header',header)
		},
		   async onReachBottom(){
		        console.log('页面触底了！');
				// this.showloadingIcon=true
				// this.showBottomIcon=false
				// this.page++
				// console.log('this.page',this.page)
				// let res = await getApp().UniRequest(`/twohandbook/goods?classifyId=${this.classifyId}&location=${this.location}&page=${this.page}`,"GET",'',this.header)
				// console.log('获取闲置首页商品2',res);
				// if(res.code==20000){
				// 	if(res.data.list.length==0){
				// 		this.showBottomIcon=true
				// 		this.showloadingIcon=false
				// 		return
				// 	}
				// 	this.goodList = [...this.goodList,...res.data.list]
				// 	console.log('追加之后的this.goodList',this.goodList)
				// 	this.showloadingIcon=false
				// 	if(this.goodList.length==0){
				// 		this.isEmpty=true
				// 	}else{
				// 		this.isEmpty=false
				// 	}
					
				// }
				// goodsList:
				
		    },
		onShow(){
			console.log('闲置onShow')
			this.page = 0
			this.getShouYeGoods()
			this.getClassifyMes()
		},
		onPageScroll(){
			console.log('页面滚动了');
		    // let { show } = this.data
		    // if(show)this.setData({show: false})
		    // clearTimeout(this.timer)
		    // this.timer = setTimeout(res => {
		    //   this.setData({show: true})
		    //   clearTimeout(this.timer)
		    // },200)
		  },
		methods:{
			translate(){
				this.isAnimationStatus = false
				this.animation = wx.createAnimation({
					duration:500
				})
				this.animation.translate(-10, 0).opacity(1).step()
				// this.animation
				this.animation=this.animation.export()
				// this.isAnimationStatus = false
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.showOverlay=false
			},
			toPublish(){
				uni.navigateTo({
					url:'./publish'
				})
			},
			itemChange(e){
				console.log('改变了111',e);
				this.locationTitle = this.locationOptions[e].label
				if(e==0){
					this.location = ''
				}else if(e==1){
					this.location = 0
				}else if(e==2){
					this.location=1
				}else{
					console.log('选地区出错啦，快来改bug')
				}
				this.getShouYeGoods()
			},
			confirmNav(){
				uni.navigateTo({
					url:'../page_mine/myPublish/myPublish'
				})
			},
			tabsChange(index){
				// this.getSearch()
				console.log('tabs改变了是',index)
				this.swiperCurrent = index;
				this.currentPage=1
				if(this.keyword!=''&&index==0){
					this.getSearch()
					return
				}
				// if(this.keyword!='')
				if(this.keyword!=''&&index!==0){
					console.log('this.goodList',index,this.goodList)
					this.goodList = this.allAssociationGoods.filter((item,index1)=>index==item.classifyId)
					console.log('this.goodList后',index,this.goodList)
					if(this.goodList.length==0){
						this.isEmpty=true
						console.log('走了11')
					}else{
						this.isEmpty=false
					}
					return 
				}
				console.log('没走1,2',this.goodList.length,this.goodList)
				this.classifyId =index
				this.page=0
				this.getShouYeGoods()
				
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				// console.log('eeeee',e);
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// console.log('滑动结束e.detail.current',e.detail.current)
				let current = e.detail.current;
				this.current = this.classifyId = current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				if(this.keyword!=''&&e.detail.current==0){
					this.getSearch()
					return
				}
				console.log('this.goodList',this.goodList,e.detail.current)
				let classifyId = e.detail.current
				console.log('classifyId',classifyId)
				if(this.keyword!=''&&e.detail.current!=0){
					this.goodList = this.allAssociationGoods.filter((item,index)=>classifyId==item.classifyId)
					console.log('筛选之后的',this.goodList)
					if(this.goodList.length==0){
						this.isEmpty=true
						console.log('走了22')
					}else{
						this.isEmpty=false
					}
					return 
				}
				
				console.log('没走1,2啊啊啊',this.goodList.length,this.goodList)
				this.page=0
				this.getShouYeGoods()
			},
			// scroll-view到底部加载更多
			scrollEvent(e){
				// console.log('正在滚动！',e)
				this.showloadingIcon=false
				this.showBottomIcon=false
				this.animation = wx.createAnimation({
					duration:100
				})
				
				this.animation.translate(30, 0).opacity(0).step()
				this.isAnimationStatus = true
				clearTimeout(this.timer)
				this.timer = setTimeout(res => {
				  console.log('滚动停止了')
				  this.translate()
				  clearTimeout(this.timer)
				},200)
				
				
			},
			async onreachBottom(res1) {
				console.log('swiper触底',res1)
				this.showloadingIcon = true
				if(this.keyword!=''){
					this.currentPage++
					let Association = await getApp().UniRequest(`/twohandbook/goods/search?title=${this.keyword}&currentPage=${this.currentPage}`,"GET", "", "")
					console.log('第2+联想',Association)
					if (Association.code == 20000) {
						let List= Association.data.list
						// this.goodList = []
						if(List.length==0){
							this.showBottomIcon=true
							this.showloadingIcon=false
							return
						}
						for (let i = 0; i < List.length; i++) {
							this.goodList.push(List[i].source)
						}
						console.log('联想之后的全部的goodList2+',this.goodList)
						this.showloadingIcon=false
						this.allAssociationGoods = this.goodList
						if(this.goodList.length==0){
							this.isEmpty=true
							console.log('走了55')
						}else{
							this.isEmpty=false
						}
					}
					return
				}
				this.page++
				console.log('this.page',this.page)
				let res = await getApp().UniRequest(`/twohandbook/goods?classifyId=${this.classifyId}&location=${this.location}&page=${this.page}`,"GET",'',this.header)
				console.log('获取闲置首页商品2',res);
				if(res.code==20000){
					if(res.data.list.length==0){
						this.showBottomIcon=true
						this.showloadingIcon=false
						return
					}
					this.goodList = [...this.goodList,...res.data.list]
					console.log('追加之后的this.goodList',this.goodList)
					this.showloadingIcon=false
					if(this.goodList.length==0){
						this.isEmpty=true
						console.log('走了33')
					}else{
						this.isEmpty=false
					}
					
				}
			},
			async getClassifyMes(){
				let res = await getApp().UniRequest("/twohandbook/goods/classify","GET",'',this.header)
				console.log('获取分类',res);
				if(res.code==20000){
					this.tabslist = res.data.list;
				}
			},
		
			async getShouYeGoods(){	
				// uni.showLoading({
				// 	title: '加载中..'
				// })
				// setTimeout(()=>{
					this.loading = false
				// },10000)
				console.log('this.classifyId',this.classifyId,this.page,this.location,'----------------')
				let res = await getApp().UniRequest(`/twohandbook/goods?classifyId=${this.classifyId}&location=${this.location}&page=${this.page}`,"GET",'',this.header)
				console.log('获取闲置首页商品',res);
				if(res.code==20000){
					this.goodList = res.data.list
					if(this.goodList.length==0){
						this.isEmpty=true
						console.log('走了44')
					}else{
						this.isEmpty=false
					}
					uni.hideLoading()
				}
			},
			async associationFun(item){
					console.log('联想的内容被点击了',item)
					uni.showLoading({
						title: '加载中..'
					})
					let header = new Object
					header.Authority = getApp().globalData.Authority
					console.log('item.id',item.id)
					let param = "?kind=0"+"&id="+item.id
					let res = await getApp().UniRequest("/twohandbook/textbook/authority/clickOne"+param,"GET",'',header)
					console.log('res333333',res);
					if (res.code == 20000){
						uni.hideLoading()
						let {data} = res.data
						let list = [data];
						console.log('list22222222',list)
						getApp().globalData.searchList = list
					}
					this.AssociationListShow=false
					uni.navigateTo({
						url: '../searchPage/searchPage?kind=0'
					})
				},
				async search(index){
					this.AssociationListShow=false
					console.log(index)
					let vm = this
					if (vm.keyword == ''){
						return
					}
					let header = new Object
					header.Authority = getApp().globalData.Authority
					let param = "?pattern="+vm.keyword+"&kind="+index
					uni.showLoading({
						title: '正在搜索'
					})
					let data = await getApp().UniRequest("/twohandbook/textbook/authority/fuzzyQuery"+param,"GET","",header)
					console.log('5555555555',data)
					uni.hideLoading()
					if (data.code == 20000){
						let list = data.data.list
						getApp().globalData.searchList = list
						if (list.length == 0){
							uni.showToast({
								title: '暂时找不到噢！',
								icon: 'error'
							})
						}else {
							uni.navigateTo({
								url: '../searchPage/searchPage?kind='+index
							})
						}
					}
					else{
						console.log('请求没有成功！')
					}
				},
				async getSearch(val) {
					this.animation1 = wx.createAnimation({
						duration:500
					})
					this.animation1.translate(0, -10).opacity(0).step()
					// this.animation
					this.animation1=this.animation1.export()
					
					
					console.log('this.keyword',this.keyword=='',typeof(this.keyword))
					if (this.keyword=='') {
						this.allAssociationGoods=[]
						this.getShouYeGoods()
						return
					}
					uni.showLoading({
						title: '加载中..'
					})
					console.log(this.keyword);
					let Association = await getApp().UniRequest(`/twohandbook/goods/search?title=${this.keyword}&currentPage=${this.currentPage}`,"GET", "", "")
					console.log('联想',Association)
					if (Association.code == 20000) {
						
						this.goodList = []
						let temp = []
						for (let i = 0; i < Association.data.list.length; i++) {
							temp.push(Association.data.list[i].source)
						}
						if(this.current==0){
							this.goodList = temp
						}else{
							this.goodList = temp.filter((item)=>this.current==item.classifyId)
						}
						uni.hideLoading()
						console.log('联想之后的全部的goodList1',this.goodList)
						this.allAssociationGoods = this.goodList
						if(this.goodList.length==0){
							this.isEmpty=true
							console.log('走了55')
						}else{
							this.isEmpty=false
						}
					}
					
				},
				closeSearchItem(){
					let vm = this
					console.log("失焦")
					this.animation1 = wx.createAnimation({
						duration:500
					})
					this.animation1.translate(0, 10).opacity(1).step()
					// this.animation
					this.animation1=this.animation1.export()
					// vm.AssociationListShow = false
					// vm.displayClass = false;
				}
			}
		}
	
</script>

<style lang="scss">
	page{
		background-color: #fff; 
		height: 100%;
	}
	swiper{
		height: 100%;
	}
	.bgImg{
		width: 76%;
		margin: 100rpx auto;
		image{
			width: 100%;
			
		}
	}
	.u-tabs-scroll-box.data-v-9c8ef540v{
		display: flex !important;
		justify-content: space-between !important;
	}
	u-search{
		/deep/.u-content.data-v-4c556b40 {
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    padding: 0 18rpx;
		    flex: 1;
			border: 6rpx solid #5db4f4 !important;
		}
	}
	.top{
		top: -2rpx;
		position: sticky;
		z-index: 100;
		.firstRow{
			background-color: #fff;
			// margin-top: 15rpx;
			align-items: center;
			display: flex;
			justify-content: center;
			z-index: 102;
			padding-left: 10rpx;
			u-mask{
				/deep/.u-mask-zoom.data-v-4bfa3b00 {
				    background-color: rgba(0, 0, 0, 0) !important;
				}
			}
			.dropdown{
			    flex: 0.7;
			    margin-left: -23rpx;
				/deep/.u-cell-item-box.data-v-5723aa40 {
					border-radius: 9rpx;
}
				/deep/.u-dropdown__content.data-v-0340bb60 {
					overflow: visible !important;
					    z-index: 11;
					    transition: opacity 0.3s linear;
					    top: 40px;
					    height: 0px !important;
}
				/deep/.u-dropdown__content__mask.data-v-0340bb60 {
					position: relative;
					z-index: 9;
					background: none;
					// width: 478% ;
					left: 0;
					top: 0;
					bottom: 0;
}
				
			}
			.search{
			    flex: 1.5;
			    margin-right: 16rpx;
			}
		}
	}
	/deep/u-modal{
		position: absolute !important;
	}
	
	.AssociatioPosition {
		position: fixed;
		top: 92rpx;
		width: 755rpx;
		display: flex;
		justify-content: center;
		z-index: 101;
		font-size: 34rpx;
		.AssociatioList{
			background-color: #ffffff;
			width: 560rpx;
			border-radius: 32rpx;
			box-shadow: 0rpx 3rpx 13rpx 3rpx #888888;
			.item{
				
				.AssociationListItem{
					border-bottom: #c0c1c3 1rpx solid;
					padding: 15rpx;
				}
				.AssociationListItem:hover{
					background-color: #ccc;
				}
			}
		}
		.AssociatioList1{
			height: 690rpx;
		}
	
		
	}
	.classifyBtn{
		display: flex;
		width: 96%;
		margin: 15rpx auto;
		justify-content: space-between;
		.itemBtn{
			margin-left: 6rpx;
			width: 19%;
		}
		.itemBtn:nth-child(1){
			margin-left: 0rpx;
			width: 16%;
			text{
				margin-left: 0;
			}
		}
		.itemBtn:nth-child(5){
			width: 16%;
			text{
				margin-left: 0;
			}
		}
		button{
			white-space: nowrap;
			width: 100%;
			font-size: 28rpx;
			border-radius: 32rpx;
			
			
			.biaoti{
				margin-left: -14rpx;
				
			}
			// .biaoti:nth-child(1){
			// 		margin-left:0rpx;
			// }
			// .biaoti:nth-child(5){
			// 		margin-left:0rpx;
			// }
			// text:nth-child(5){
			// 	margin-left:0;
			// }
			
		}
	}
	.goodListCss{
		margin-top: 20rpx;
	}
	.publishBtn{
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		.inputbtn {
			margin: 0rpx auto;
		    // background-color: transparent;
		    // color: #fd4f02;
		    font-size: 34rpx;
			width: 60%;
			/deep/.u-size-default.data-v-6e15e680 {
			    font-size: 30rpx;
			    height: 106rpx;
			    line-height: 80rpx;
			    width: 106rpx;
			    border-radius:54rpx;
			    position: fixed;
			    bottom: 37rpx;
			    right: 35rpx;
			}
			/deep/.u-btn--primary.data-v-6e15e680 {
				color: #f7e9e9;
				border-color: #2979ff;
				background-color: #2979ff;
}
	}
		
	}
	.ani{
		position: fixed;
		bottom: 40rpx;
		width: 40%;
	}
	/deep/.u-content.data-v-4c556b40 {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    padding: 0px 18rpx;
	    margin-top: 18rpx;
	    flex: 1;
	}
	.loadingCss{
		padding-top: 20rpx;
		width: 50%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		.loadingIcon{
			
		}
		text{
			
		}
	}
	.showBottomCss{
	    // width: 100%;
	    // display: flex;
	    // justify-content: center;
	    // position: fixed;
	    // bottom: 32rpx;
		padding-top: 20rpx;
		width: 50%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	

</style>
